<template>
  <div class="main-container">

    <div class="left-container">
        <div class = "left-top">
            <p style="color:white;font-weight: bold" >今日活跃车辆数：{{dailyCarNum}}</p>
        </div>
        <div class = "left-center" id="drawChartCarPeriodTimeNum"></div>
        <div class = "left-bottom"></div>
    </div>

    <div class="center-container">
      <div class="center-top">
          <div class="center-title">实时大屏</div>
          <div class="center-sub-bottom">
            <p class="center-time">当前时间：{{curretTime}}</p>
            <p class="online-car">实时在线车辆：{{realTimeCarNum}}</p>
          </div>
      </div>
      <div class="center-center">
            <div id="byteVCellId"></div>
<!--        <iframe id="byteVCellId" frameborder="no" border="0" src="https://maplab.amap.com/share/mapv/999611a4e024218f2bff458408db80ef"></iframe>-->
      </div>
      <div class="center-bottom">

      </div>
    </div>

    <div class="right-container">
      <div class="right-top">
        <p style="color:white;font-weight: bold" v-for="item in appRealPoJoList">[{{item.value2}}] - 实时活跃应用车辆数：{{item.value1.split('.')[0]}}</p>
        <p style="color:white;font-weight: bold" v-for="item in appPojoDailyList">[{{item.value2}}] - 今日活跃车辆数：{{item.value1.split('.')[0]}}</p>
      </div>
      <div class="right-center"  id="drawChartAppPeriodTimeNum"></div>
      <div class="right-bottom"></div>
    </div>




  </div>
</template>

<script>
  // import Axios from 'axios'
  import 'echarts/map/js/china.js'
  import 'echarts/lib/component/title'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/chart/heatmap'
  import 'echarts/lib/component/toolbox'
  import 'echarts/lib/component/tooltip'
export default {
  name: 'AuroraLargeScreen',
  data () {
    return {
        realTimeCarNum:"",
        curretTime:"",
        dailyCarNum:"",
        realTimeAppNum:"",
        dailyAppNum:"",
        carLocations:[],
        appPojoDaily:{
          value1:"",
          value2:"",
          value3:""
        },
      // 截止到今日当时的app分类数量
      appPojoDailyList:[],
      // 实时的app分类数量
      appRealPoJoList:[],

      //时间轴
      timeAxis:[],
      // car的分时今日数据
      carTodayPeriodData:[],
      carMax:0,
      // car的分时昨日数据
      carYesterdayPeriodData:[],
      appMax:0,
      // app时间轴
      timeAppAxis:[],
      // app的分时今日数据
      appTodayPeriodData:[],
      // app的分时昨日数据
      appYesterdayPeriodData:[],
      // 热力图
      locationCarsList:[]
    }
  },
  mounted() {
    this.drawChartCarPeriodTimeNum();
    this.drawChartAppPeriodTimeNum();
    this.getRealCarData();
    this.getCurrentTime();
    this.getDailyCarNum();
    this.getRealAppData();
    this.getDailyAppNum();
    this.getCarLocationData();
    // setInterval(this.getRealAppData,30000)


    // this.syncAppAreaData();
    // this.syncCarAreaData();
    // this.syncAppDailyAreaData();
    // this.syncCarDailyAreaData();
    // this.syncCarLocationData()

    //动态显示时间
    setInterval(this.getCurrentTime,1000)
    // 设置定时器 - apparea ，方法不加括号
    setInterval(this.getRealAppData,60000)
    // 设置定时器 - appDailyArea
    setInterval(this.getDailyAppNum,60000)
    // 设置定时器 - CarArea
    setInterval(this.getRealCarData,60000)
    // 设置定时器 - carDailyArea
    setInterval(this.getDailyCarNum,60000)
    // 设置定时器 - carLocation
    setInterval(this.getCarLocationData,60000)
  },
  methods: {

    /* 定时调度同步数据的方法*/
    // 实时app实时使用数量的方法调度
    syncAppAreaData() {
      var api = "/appAreaSyncData"
      this.$axios.get(api).then((response)=>{
        console.log(response.data)
        // this.getRealAppData();
      }).catch((error)=>{
        console.log(error)
      })
    },
    // 今日活跃的应用数量
    syncAppDailyAreaData(){
      var api = "/appDailyAreaSyncData"
      this.$axios.get(api).then((response)=>{
        // this.getDailyAppNum()
      }).catch((error)=>{
        console.log(error)
      })
    },
    // 实时car使用数量
    syncCarAreaData(){
      var api = '/carAreaSyncData'
      this.$axios.get(api).then((response)=>{
        console.log(response)
        // this.getRealCarData();
      }).catch((error)=>{
        console.log(error);
      })
    },
    // 今日活跃车辆数量
    syncCarDailyAreaData(){
      var api = "/carDailyAreaSyncData"
      this.$axios.get(api).then((response)=>{
        // this.getDailyCarNum()
      }).catch((error)=>{
        console.log(error)
      })
    },
    // 实时车辆地域分布
    syncCarLocationData(){
      var api = '/carLocationSyncData'
      this.$axios.get(api).then((response)=>{
        // this.getCarLocationData()
      }).catch((error)=>{
        console.log(error)
      })
    },



    test(){
      console.log(this.getCurrentTime)
    },

    // 车辆时段分时统计可视化
    drawChartCarPeriodTimeNum() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("drawChartCarPeriodTimeNum"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['今日分时车辆数',  '昨日分时车辆数'],
          textStyle: {
            color:'#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeAxis,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 11
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '车辆数',
            min: 0,
            max: this.carMax + 500,
            interval: 1000,
            axisLabel: {
              formatter: '{value} 辆'
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 11
              }
            },
            nameTextStyle:{
              color:'#fff'
            }
          }
        ],
        series: [
          {
            name: '今日分时车辆数',
            type: 'bar',
            data: this.carTodayPeriodData
          },
          {
            name: '昨日分时车辆数',
            type: 'line',
            smooth:true,
            lineStyle:{
              color:'#fff'
            },
            data: this.carYesterdayPeriodData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },

    // 应用车辆时段分时统计可视化
    drawChartAppPeriodTimeNum() {
      // 基于准备好的dom，初始化echarts实例
      let myChartapp = this.$echarts.init(document.getElementById("drawChartAppPeriodTimeNum"));
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['今日分时应用车辆数',  '昨日分时应用车辆数'],
          textStyle: {
            color:'#fff'
          }
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeAppAxis,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 11
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '车辆数',
            min: 0,
            max: this.appMax + 500,
            interval: 1000,
            axisLabel: {
              formatter: '{value} 辆'
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: 11
              }
            },
            nameTextStyle:{
              color:'#fff'
            }
          }
        ],
        series: [
          {
            name: '今日分时应用车辆数',
            type: 'bar',
            data: this.appTodayPeriodData
          },
          {
            name: '昨日分时应用车辆数',
            type: 'line',
            smooth:true,
            lineStyle:{
              color:'#fff'
            },
            data: this.appYesterdayPeriodData
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChartapp.setOption(option);
    },

    DrawChartsHeartMap() {
      // 基于准备好的dom，初始化echarts实例
      let myChartapp = this.$echarts.init(document.getElementById("byteVCellId"));

      let option = {
        // title: {
        //   text: '布局城市展示',
        //   x: 'left',
        //   textStyle: {
        //     fontSize: 33,
        //     color: '#fff',
        //     fontWeight: 'bold',
        //     fontFamily: 'testFamily'
        //   }
        // },
        tooltip: {
          trigger: 'item'
        },

        visualMap: {
          show: false,
          min: 0,
          max: 5,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ['blue', 'green', 'yellow', 'red']
            // color: ['green', 'yellow', 'red']
          }
        },
        geo: {
          map: 'china',
          zoom: 1,
          label: {
            emphasis: {
              show: true
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: '#0d2a5f',
              borderColor: '#fff'
            },
            emphasis: {
              areaColor: '#555'
            }
          }
        },
        series: [{
          name: '中国',
          type: 'heatmap',
          coordinateSystem: 'geo',
          data: this.locationCarsList,
          pointSize: 7,
          blurSize: 3
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChartapp.setOption(option);

    },


    // 获取车辆分时数据
    getCarPeriodData(ymd,timeMark,hour,hm){
      //http://localhost:8082/getCarPeriodData/2021-01-04/19:51:11
        var api = '/getCarPeriodData/'+ymd+'/'+timeMark;
        this.$axios.get(api).then((res) =>{
          // 如果是新的新的一天,则重新开始计数  hour == '00'
          if(hour == '30'){
            this.timeAxis = [];
            this.carTodayPeriodData = [];
            this.carYesterdayPeriodData = [];
          }
          // 时间刻度轴
          this.timeAxis.push(hm);
          // console.log("时间段："+this.timeAxis)
          // 今日的当前时间的数据
          this.carTodayPeriodData.push(res.data[0].value3)
          // console.log("测试当前日期"+this.carTodayPeriodData)
          // 昨日当前时间的数据
          if (res.data[1] == null){
            this.carYesterdayPeriodData.push(0)
          }else{
            this.carYesterdayPeriodData.push(res.data[1].value3)
          }

          // console.log("测试昨日日期"+this.carYesterdayPeriodData)

          var todayMax = Math.max.apply(null,this.carTodayPeriodData)
          var yesterdayMax = Math.max.apply(null,this.carYesterdayPeriodData)
          if(todayMax > yesterdayMax) {
            this.carMax = todayMax
          }else{
            this.carMax = yesterdayMax
            }
          this.drawChartCarPeriodTimeNum()


        }).catch((err) =>{
          console.log(err)
        })
    },

    // 获取app车辆分时段的数据
    getAppPeriodData(ymd,timeMark,hour,hm){
      var api = '/getAppPeriodData/'+ymd+"/"+timeMark;
      this.$axios.get(api).then((res) =>{
        if(hour == '30'){
          this.timeAppAxis = []
          this.appTodayPeriodData = []
          this.appYesterdayPeriodData = []
        }else{
          this.timeAppAxis.push(hm);
          // 今日的当前时间的数据
          this.appTodayPeriodData.push(res.data[0].value3)
          // console.log("测试当前日期app"+this.appTodayPeriodData)
          // 昨日当前时间的数据
          if (res.data[1] == null){
            this.appYesterdayPeriodData.push(0)
          }else{
            this.appYesterdayPeriodData.push(res.data[1].value3)
          }
          // console.log("测试昨日日期app"+this.appYesterdayPeriodData)

          var todayMax = Math.max.apply(null,this.appTodayPeriodData)
          var yesterdayMax = Math.max.apply(null,this.appYesterdayPeriodData)
          if(todayMax > yesterdayMax){
            this.appMax = todayMax;
          }else{
            this.appMax = yesterdayMax;
          }

          this.drawChartAppPeriodTimeNum()
        }
      }).catch((err) =>{
        console.log(err)
      })
    },


    // 获取当前时间
    getCurrentTime(){
      var data = new Date();
      var month =data.getMonth() < 9 ? "0" + (data.getMonth() + 1) : data.getMonth() + 1;
      var date = data.getDate() <= 9 ? "0" + data.getDate() : data.getDate();
      var hour = data.getHours() <= 9 ? "0" + data.getHours() : data.getHours();
      var minute = data.getMinutes() <= 9 ? "0" + data.getMinutes() : data.getMinutes();
      var second = data.getSeconds() <= 9 ? "0" + data.getSeconds() : data.getSeconds();
      this.curretTime = data.getFullYear() + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;

      // 调用car分时数据方法(minute == '00' ||minute == '30') &&
      if ( second == '00'){
        var ymd = data.getFullYear() + "-" + month + "-" + date;
        var timeMark = hour  + minute + second;
        var hm = hour + ":" + minute;
        this.getCarPeriodData(ymd,timeMark,minute,hm);
        this.getAppPeriodData(ymd,timeMark,minute,hm)
      }
    },
    // 获取实时在线车辆
    getRealCarData() {
      var api = "/selectCarSum"
      this.$axios.get(api).then((response)=>{
        console.log("获取实时在线车辆："+response.data)
        this.realTimeCarNum = response.data;
      }).catch((error)=>{//这里使用的都是箭头函数
        console.log(error)
      })
    },
    // 获取今日活跃车辆
    getDailyCarNum(){
      var api = "/selectCarAll"
      this.$axios.get(api).then((response)=>{
        console.log("获取今日活跃车辆："+response.data)
        // 数据还未读取完成，不做更新操作
        if(response.data > this.dailyCarNum){
          this.dailyCarNum = response.data
        }
      }).catch((error)=>{
        console.log(error)
      })
    },
    // 获取实时在使用的应用
    getRealAppData(){
      var api = "/selectAppSum";
      this.$axios.get(api).then((response)=>{
        console.log("获取实时在使用的应用："+response.data)
        for (var i= 0;i < response.data.length;i++){
          this.appRealPoJoList[i] = response.data[i]
        }
      }).catch((error)=>{
        console.log(error)
      })
    },
    // 今日活跃应用数量
    getDailyAppNum(){
      var api = "/selectAppIdClassNum";
      this.$axios.get(api).then((response)=>{
        console.log("今日活跃应用数量："+response.data)
        for (var i= 0;i < response.data.length;i++){
          this.appPojoDailyList[i] = response.data[i]
        }
      }).catch((error)=>{
        console.log(error)
      })
    },
    // 获取车辆的实时地域分布
    getCarLocationData(){
      var api = "/carLocationData"
      this.$axios.get(api).then((response)=>{
        var tempList = []
       for (var i = 0;i < response.data.length;i++){
         tempList[i] = response.data[i]
       }
       this.locationCarsList = tempList
        this.DrawChartsHeartMap()
      }).catch((error)=>{
        console.log(error)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>


  .main-container{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    background-color: #172737;
    padding-top: 15px;
    padding-bottom: 14px;
  }

  .left-container{
    width:530px;
    /*height: 300px;*/
    border:1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .left-container > div{
    width:90%;
    height: 300px;
    border:1px solid white;
    margin-left:20px;
  }


  .center-container{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .center-top{
    width:800px;
    height: 150px;
    border:1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .center-title{
    color:white;
    font-size:40px;
    margin: auto;
    letter-spacing: 1em;
    font-weight:bold;
    border:1px solid greenyellow;
  }
  .center-sub-bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .center-sub-bottom > p{
    width: 300px;
    /*height:60px;*/
    border:1px solid greenyellow;
    color: white;
    font-weight: bold;
  }


  .center-center{
    width:800px;
    height: 500px;
    border:1px solid red;
  }

  .center-bottom{
    width:800px;
    height: 250px;
    border:1px solid red;
  }
  #byteVCellId{
    width:800px;
    height: 500px;
  }

  .right-container{
    width: 530px;
    /*height: 300px;*/
    border:1px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .right-container > div{
    width:90%;
    height: 300px;
    border:1px solid white;
    margin-left:20px;
    }

  .right-top{
    display: flex;
    flex-direction: column;
  }


</style>
